<template>
  <el-card>
    <template #header>
      <el-button type="primary" :icon="Plus" @click="dialogFormVisible = true">
        添加
      </el-button>
    </template>

    <!--
        前端开发人员在进行前端项目开发的时候需要有一定的审美
        1.按钮操作区，一定要定宽，并且要居中
        2.前面如果有单选、复选，一定要定宽，居中，不要太大，适合就好
        3.所有的日期是固定的，一定要定宽，居中
        4.对于类似于名称、标题等不确认长度的，一定要设置自适应，超出省略，一定要左对齐
        5.对于类似于产品价格、工资、销售量这样的数字应该如何排版面？右对齐
     -->
    <el-table :data="tableData" style="width: 100%">
      <el-table-column label="Date" width="180">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <el-icon><timer /></el-icon>
            <span style="margin-left: 10px">{{ scope.row.date }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="Name">
        <template #default="scope">
          <el-popover
            effect="light"
            trigger="hover"
            placement="top"
            width="auto"
          >
            <template #default>
              <div>name: {{ scope.row.name }}</div>
              <div>address: {{ scope.row.address }}</div>
            </template>
            <template #reference>
              <el-tag>{{ scope.row.name }}</el-tag>
            </template>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column
        label="Price"
        prop="price"
        align="right"
      ></el-table-column>
      <el-table-column label="Operations" width="150" align="center">
        <template #default="scope">
          <el-button size="small" @click="handleEdit(scope.$index, scope.row)">
            修改
          </el-button>
          <el-button
            size="small"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      style="margin-top: 20px"
      v-model:current-page="currentPage4"
      v-model:page-size="pageSize4"
      :page-sizes="[100, 200, 300, 400]"
      :small="small"
      :disabled="disabled"
      :background="background"
      layout="total, sizes, prev, pager, next, jumper"
      :total="400"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </el-card>

  <el-dialog v-model="dialogFormVisible" title="添加品牌">
    <!-- 设置ref的目的是为了进行表单级验证 -->
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      label-width="120px"
      class="demo-ruleForm"
      status-icon
    >
      <el-form-item label="品牌名称" prop="name">
        <el-input v-model="ruleForm.name" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="submitForm(ruleFormRef)">
          确认
        </el-button>
        <el-button @click="resetForm(ruleFormRef)">重置</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { Plus, Timer } from '@element-plus/icons-vue'
import { reactive, ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'

interface User {
  date: string
  name: string
  address: string
  price: string
}

const handleEdit = (index: number, row: User) => {
  console.log(index, row)
}
const handleDelete = (index: number, row: User) => {
  console.log(index, row)
}

const tableData: User[] = [
  {
    date: '2016-05-03',
    name: 'Tom Jack',
    price: '$ 100.00',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom 毛毛',
    price: '$ 91100.00',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom.Walwaaldsaljflasdjflasfasdfasdfasdflkjldfj;laksf;ljsad;lfjsalfldsajflkjdsa',
    address: 'No. 189, Grove St, Los Angeles',
    price: '$ 22100.40',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
    price: '$ 111111100.50',
  },
]

const currentPage4 = ref(4)
const pageSize4 = ref(100)
const small = ref(false)
const background = ref(false)
const disabled = ref(false)

const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
}

const dialogFormVisible = ref(false)

// ruleFormRef已经被声明成了一个ref响应式数据类型，但是它的数据类型是 FormInstance
// 利用ref去找一个自定义组件的方式是：<InstanceType<typeof HelloWorld>>
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive({
  name: 'Hello',
})

/*
表单验证的三个级别：
1.字段级
2.自定义级
3.表单级
    1)给表单添加一个ref，目的是为了让别人找到表单
    2)第三方，比如按钮，是通过ref去找到表单，然后需要利用表单的方法去进行校验（注意：如果表单没提供校验的方法，我们根本无法实现表单级校验）

*/

// 校验品牌名称
// rule是校验规则
// value是你输入进来的值
// callback执行回调
const validateTmName = (rule: any, value: any, callback: any) => {
  // 自定义校验主要是对输入值的校验，然后利用回调进行成功或者失败的处理
  if (value.length < 2 || value.length > 10) {
    callback('长度必须在2-10字符之间') // 不通过的可以给callback传递一个错误信息，是一个提示字符串
  } else {
    callback() // 通过，利用callback()直接 return
  }
}

const rules = reactive<FormRules>({
  // 现在只校验name字段，并且利用的是内置校验规则，比如说required、message、trigger
  // required必须填写
  // message出错以后的信息提示
  // trigger触发的时机，blur是失去焦点的时候

  // name的数据类型现在是什么？是数组。数组就意味着可以给name添加多个验证规则
  name: [
    { required: true, message: '请输入品牌名称', trigger: 'blur' },
    // { min: 3, max: 5, message: "品牌名称必须在3-5字符之间", trigger: "blur" },
    { validator: validateTmName, trigger: 'blur' },
  ],
})

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log('submit!')
    } else {
      console.log('error submit!', fields)
    }
  })
}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}
</script>

<script lang="ts">
export default {
  name: 'Trademark',
}
</script>
